<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <el-input clearable v-model="form.society" style="width: 300px" placeholder="社会力量"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="query()">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="success" @click="open">增添社会力量</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="tableData" border>
            <el-table-column
                prop="society"
                align="center"
                label="社会力量">
                <!-- <template slot-scope = "scope">
                    <span v-if="scope.row.object == '1'">全市通办</span>
                    <span v-if="scope.row.object == '2'">殡葬服务</span>
                    <span v-if="scope.row.object == '3'">养老服务</span>
                    <span v-if="scope.row.object == '4'">低保服务</span>
                    <span v-if="scope.row.object == '5'">社会组织</span>
                </template> -->
            </el-table-column>
            <el-table-column prop="ability" align="center" label="服务能力"></el-table-column>
            <el-table-column prop="intention" align="center" label="帮扶意向"></el-table-column>
            <el-table-column align="center" label="操作" width="220">
                <template slot-scope="scope">
                    <el-button type="success" size="mini" @click="openAdd(scope.row)">编辑</el-button>
                    <el-button type="danger" size="mini" @click="del(scope.row.id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="pageNo"
                :page-sizes="[10, 20, 50, 100]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next"
                :total="totalRecord" class="text-center mt10">
        </el-pagination>
        <!-- 社会力量注册弹出框 -->
        <el-dialog title="创建指标" :visible.sync="dialogFormVisible" @close='closeDialog' width="650px">
            <el-form :rules="rules" :model="addform" ref="addform" class="ml100">
                <el-form-item label="社会力量" prop="society">
                    <el-input v-model="addform.society" class="w400"></el-input>
                    <!-- <el-select v-model="addform.object" placeholder="请选择" class="w400">
                        <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                        </el-option> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="服务能力" prop="ability">
                    <el-input v-model="addform.ability" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="帮扶意向" prop="intention">
                    <el-input v-model="addform.intention" class="w400"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()">确 定</el-button>
            </div>
        </el-dialog>

        <!-- 修改弹出 -->
        <el-dialog title="社会力量" :visible.sync="dialogFormVisible1" @close='closeDialog' width="650px">
            <el-form :rules="rules" :model="upform" ref="addform" class="ml100">
                <el-form-item label="社会力量" prop="society">
                    <el-input v-model="upform.society" class="w400"></el-input>
                    <!-- <el-select v-model="upform.object" placeholder="请选择" class="w400">
                        <el-option
                              v-for="item in options"
                              :key="item.value"
                              :label="item.label"
                              :value="item.value">
                        </el-option>
                    </el-select> -->
                </el-form-item>
                <el-form-item label="服务能力" prop="ability">
                    <el-input v-model="upform.ability" class="w400"></el-input>
                </el-form-item>
                <el-form-item label="帮扶意向" prop="intention">
                    <el-input v-model="upform.intention" class="w400"></el-input>
                </el-form-item>
            </el-form>
            <div style="width: 160px; margin-left: 445px">
                <el-button @click="dialogFormVisible1 = false">取 消</el-button>
                <el-button type="primary" @click="upsave()">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>


<script>
    export default {
        data() {
            return {
                updateid:'',//修改传的id
                detailVisible:false,
                detailData:[],//回应详情
                contentVisible:false,
                contentForm:{},
                activeName: 'first',
                dynamicTags: [],
                createId: '',//创建的动员id
                form: {
                    society: ''
                },
                addform: {
                    society: '',
                    ability: '',
                    intention:''
                },
                rules: {
                    society: [{required: true, message: '请输入社会力量', trigger: 'blur'}],
                    ability: [{required: true, message: '请输入服务能力', trigger: 'blur'}],
                    intention: [{required: true, message: '请输入帮扶意向', trigger: 'blur'}]
                },
                upform:{
                    society: '',
                    ability: '',
                    intention:''
                },
                tableData: [],
                pageNo: 1,
                pageSize: 10,
                totalRecord: 0,
                totalPage: 0,
                dialogFormVisible: false,
                dialogFormVisible1: false,//修改弹出
                loading: false,
                typeList: [],
                options: [{
                  value: '1',
                  label: '全市通办'
                }, {
                  value: '2',
                  label: '殡葬服务'
                }, {
                  value: '3',
                  label: '养老服务'
                }, {
                  value: '4',
                  label: '低保服务'
                }, {
                  value: '5',
                  label: '社会组织'
                }],
                value: '',
            }
        },


        methods: {
            //初始化
            async init() {
                this.loading = true;
                const res = await this.$http('selectDemandList', this.form);
                console.log(res)
                this.tableData = res.results;
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
                this.typeList = await this.$http('resourcesList');
                this.loading = false;
            },


            //分页
            async handleSizeChange(val) {
                this.form.pageSize = val;
                this.init();
            },
            async handleCurrentChange(val) {
                this.form.pageNo = val;
                this.init();
            },
            //查询
            async query() {
                const res = await this.$http('selectDemandList',{
                    society:this.form.society
                })
                this.tableData = res.results
                this.totalPage = res.totalPage;
                this.totalRecord = res.totalRecord;
            },
            //弹出模态框
            async open(row) {
                console.log('roero', row)
                this.dialogFormVisible = true;

            },

            //点击编辑
            async openAdd(row) {
                console.log('row',row)
                this.upform = row;
                this.updateid = row.id;
                this.dialogFormVisible1 = true;

            },
            //保存
            async save() {
                if(this.addform.society === null || this.addform.society === ''){
                    this.$message({
                        message: '请输入社会力量',
                        type: 'error'
                    });
                }else if(this.addform.ability === null || this.addform.ability === ''){
                    this.$message({
                        message: '请输入服务能力',
                        type: 'error'
                    });
                }else if(this.addform.intention === null || this.addform.intention === ''){
                    this.$message({
                        message: '请输入帮扶意向',
                        type: 'error'
                    });
                }else{
                    const res = await this.$http('createConnection', {
                        society: this.addform.society,
                        ability: this.addform.ability,
                        intention: this.addform.intention,
                    });

                    if (res.count === 1) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.dialogFormVisible = false
                        this.init()
                    } else {
                        this.$message({
                            message: '添加失败',
                            type: 'error'
                        });
                    }
                }

            },
            //修改保存
            async upsave() {
                const res = await this.$http('createConnection', {
                        id:this.updateid,
                        society: this.upform.society,
                        ability: this.upform.ability,
                        intention: this.upform.intention,
                    });

                if (res.count === 1) {
                    this.$message({
                        message: '修改成功',
                        type: 'success'
                    });
                    this.dialogFormVisible1 = false
                    this.init()
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    });
                }
            },
            //删除
            async del(id) {
                this.$confirm('确认是否删除?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    const res = await this.$http('createConnection', {
                        id: id,
                        del_flag: '1'
                    });
                    if (res.count === 1) {
                        this.$message({type: 'success', message: '删除成功'});
                        this.init();
                    } else {
                        this.$message.error('删除失败');
                    }
                }).catch(() => {
                    this.$message({type: 'info', message: '已取消删除'});
                });
            },
            //请空数据
            async closeDialog() {
                this.addform = {
                    society: '',
                    ability: '',
                    intention: ''
                };
            },
        },

        watch: {},

        mounted() {
            this.init();
        },

    }
</script>


<style scoped>
    .w400 {
        width: 330px
    }
</style>
